<template>
  <div>
    <el-card id="boxcss" v-for="(item,index) in users">
      <div slot="header" class="clearfix">
        <span><el-avatar :size="80" :src="circleUrl"></el-avatar></span>
        <el-button @click="xiugai(item)" style="float: right" type="text">修改昵称</el-button>
      </div>
      <div class="text item">{{ item.phone }}</div>
      <div class="text item">{{ item.username }}</div>
    </el-card>

    <el-dialog title="修改框" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="userInfo.username" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOneUserById } from "@/services/user";
import { updateUserPassword } from "@/services/user";

export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      userInfo: {
        username:'',
      },
      users:[],
      dialogFormVisible: false,
      formLabelWidth: "120px"
    };
  },
  methods: {
    xiugai(item) {
      this.dialogFormVisible = true;
      this.userInfo.id = item.id;
      console.log(this.userInfo.id)
      this.userInfo.username = item.username;
    },
    confirm() {
      updateUserPassword(this.userInfo)
        .then((res) => {
          this.dialogFormVisible = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted: function () {
    getOneUserById({ userId: this.$store.state.account.user.id }).then(
      (res) => {
        this.users = res.data;
        console.log(4898465)
        console.log(this.users)
      }
    );
  },
};
</script>

<style>
.text {
  font-size: 25px;
}
.item {
  margin-bottom: 50px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
#boxcss {
  border-radius: 30px;
  background-clip: padding-box;
  margin: 160px auto;
  width: 500px;
  padding: 35px 35px 15px 35px;
  background-color: rgb(247, 247, 247);
  border: 2px solid #f7f4f4;
  box-shadow: 0 0 25px #3d3b3b;
  text-align: left;
  height: 400px;
}
</style>

